<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <!-- 顶部导航栏 -->
    <header class="bg-white dark:bg-gray-800 shadow-md">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <n-icon size="24">
            <BookOutline />
          </n-icon>
          <h1 class="text-xl font-bold">Todo管理系统</h1>
        </div>
        
        <!-- 右侧菜单 -->
        <div class="flex items-center space-x-4">
          <n-button 
            text 
            @click="$router.push('/my-day')"
            type="primary"
          >
            <template #icon>
              <n-icon size="18">
                <CalendarOutline />
              </n-icon>
            </template>
            我的一天
          </n-button>
          
          <n-button 
            text 
            @click="$router.push('/groups')"
          >
            <template #icon>
              <n-icon size="18">
                <ListOutline />
              </n-icon>
            </template>
            分组管理
          </n-button>
          
          <n-dropdown>
            <n-button text>
              <template #icon>
                <n-icon size="18">
                  <PersonOutline />
                </n-icon>
              </template>
              {{ user?.username || '用户' }}
              <template #trigger>
                <n-icon size="16">
                  <ChevronDownOutline />
                </n-icon>
              </template>
            </n-button>
            <template #options>
              <n-dropdown-option @click="logout">
                <template #icon>
                  <n-icon size="16">
                    <LogOutOutline />
                  </n-icon>
                </template>
                退出登录
              </n-dropdown-option>
            </template>
          </n-dropdown>
        </div>
      </div>
    </header>
    
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
      <slot></slot>
    </main>
    
    <!-- 底部 -->
    <footer class="bg-white dark:bg-gray-800 shadow-inner py-4 mt-8">
      <div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
        Todo管理系统 © {{ new Date().getFullYear() }}
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store/auth'
import { 
  BookOutline, 
  CalendarOutline, 
  ListOutline, 
  PersonOutline, 
  ChevronDownOutline,
  LogOutOutline
} from '@vicons/ionicons5'

// 获取认证状态
const authStore = useAuthStore()
const user = authStore.user

// 退出登录
const logout = () => {
  authStore.logout()
  window.location.href = '/login'
}
</script>

<style scoped>
/* 响应式设计 */
@media (max-width: 768px) {
  header {
    padding: 0.5rem;
  }
  
  h1 {
    font-size: 1.25rem;
  }
  
  main {
    padding: 1rem;
  }
}
</style>
